<template>
	<view>
		<uni-row class="text-center">
			<uni-col :span="6" >
				<uni-tag text="按计划实施" custom-style="background-color: rgba(146,208,80,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="按计划滞后" custom-style="background-color: rgba(255,0,0,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="当天要开始" custom-style="background-color: rgba(255,255,0,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="当天要完成" custom-style="background-color: rgba(236,0,183,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="明天要开始" custom-style="background-color: rgba(0,187,255,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="明天要完成" custom-style="background-color: rgba(255,131,131,0.6);color:#666"></uni-tag>
			</uni-col>
			<uni-col :span="6">
				<uni-tag text="未上报状态" custom-style="background-color: rgba(168,160,183,0.6);color:#666"></uni-tag>
			</uni-col>
		</uni-row>
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
			<view class="scroll-view-item_H" v-for="e in region" :key="e.value">
				<view class="p10-5"><uni-tag @click="onRegion(e.value)" :inverted="current == e.value ? false : true" :text="e.text" type="primary" /></view>
			</view>
		</scroll-view>
		<view style="font-size: .7rem;padding:5px">
			<uni-table ref="table" border stripe emptyText="暂无更多数据" >
				<uni-tr>
					<uni-th v-for="(e,index) in dataInfo" :key="index" width="300" align="center">{{e[0]}}</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td v-for="(e,index) in dataInfo" :key="index">
						<uni-row >
							<uni-col :span="8" v-if="index == 0">
								<view class="info" >工序</view>
							</uni-col>
							<uni-col :span="8" >
								<view class="info">开始时间</view>
							</uni-col>
							<uni-col :span="8">
								<view class="info">结束时间</view>
							</uni-col>
						</uni-row>
						<uni-row v-for="(item,i) in e[1]" :key="i" >
							<uni-col :span="8"  v-if="index == 0">
								<view class="info line-clamp1">{{item.title}}</view>
							</uni-col>
							<uni-col :span="8" >
								<view class="info" @click="onDate('start',item.id)" style="background-color: rgba(168,160,183,0.6)">{{item.start_date}}</view>
							</uni-col>
							<uni-col :span="8">
								<view class="info" @click="onDate('end',item.id)" style="background-color: rgba(168,160,183,0.6)">{{item.end_date}}</view>
							</uni-col>
						</uni-row>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
import func from '../../api/func'
import request from '../../api/request'

	export default {
		data() {
			return {
				resData:[],
				dataInfo: [],
				titleInfo: [],
				current: 0,
				region: [],
				project:{}
			}
		},
		onLoad() {
			this.project = uni.getStorageSync('project')
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				request('schedule','POST',{project_id:this.project.id}).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					_this.region = func.map_arr(res.region)
					_this.resData = res.data
					_this.titleInfo = res.title
					_this.onRegion(0)
					
				}).catch(err => {
					console.log(err)
				})
			},
			onDate(type,id){
				uni.navigateTo({
					url: '/pages/schedules/info/info?id='+id+'&type='+type
				});
			},
			onRegion(index) {
				this.current = index
				this.dataInfo = Object.entries(this.resData[this.region[index].text])
			}
		}
	}
</script>

<style>
.uni-col{padding-top: 12px;}
.scroll-view_H { white-space: nowrap; width: 100%; }
.scroll-view-item_H { display: inline-block;text-align: center;padding: 12rpx 15rpx 12px 0px;}
.info{padding: 2px 5px;line-height: 24px;}
</style>
